<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="node_modules/_bootstrap@3.3.7@bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
	<nav class="navbar navbar-default">
	  <div class="container-fluid">
	    <!-- Brand and toggle get grouped for better mobile display -->
	    <div class="navbar-header">
	      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
	        <span class="sr-only">Toggle navigation</span>
	        <span class="icon-bar"></span>
	        <span class="icon-bar"></span>
	        <span class="icon-bar"></span>
	      </button>
	      <a class="navbar-brand" href="#">WEB开发大本营OA</a>
	    </div>

	    <!-- Collect the nav links, forms, and other content for toggling -->
	    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
	      <ul class="nav navbar-nav">
	        <li class="active"><a href="#">首页 <span class="sr-only">(current)</span></a></li>
	        <li><a href="#">管理</a></li>
	        <li class="dropdown">
	          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
	          <ul class="dropdown-menu">
	            <li><a href="#">Action</a></li>
	            <li><a href="#">Another action</a></li>
	            <li><a href="#">Something else here</a></li>
	            <li role="separator" class="divider"></li>
	            <li><a href="#">Separated link</a></li>
	            <li role="separator" class="divider"></li>
	            <li><a href="#">One more separated link</a></li>
	          </ul>
	        </li>
	      </ul>
	      <form class="navbar-form navbar-left">
	        <div class="form-group">
	          <input type="text" class="form-control" placeholder="搜索你感兴趣的内容">
	        </div>
	        <button type="submit" class="btn btn-default">Submit</button>
	      </form>
	      <ul class="nav navbar-nav navbar-right">
	        <li><a href="#"></a></li>
	        <li class="dropdown">
	          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">小张 <span class="caret"></span></a>
	          <ul class="dropdown-menu">
	            <li><a href="#">小张</a></li>
	            <li><a href="#">Another action</a></li>
	            <li><a href="#">Something else here</a></li>
	            <li role="separator" class="divider"></li>
	            <li><a href="#">Separated link</a></li>
	          </ul>
	        </li>
	      </ul>
	    </div><!-- /.navbar-collapse -->
	  </div><!-- /.container-fluid -->
	</nav>


	<div class="container-fluid">
		<div class="row">
		    <div class="col-md-4">
		    	<div class="btn-group" role="group" aria-label="...">
		  			<button id="addUser" type="button" class="btn btn-default btn btn-success">添加用户</button>
		  			<button type="button" class="btn btn-default btn btn-warning">修改用户</button>
		 			<button type="button" class="btn btn-default btn-danger">删除用户</button>
				</div>

		    </div>

		    <div class="col-md-3 col-md-offset-5 ">
			    <div class="input-group">
			      <input type="text" class="form-control" placeholder="请输入搜索条件">
			      <span class="input-group-btn">
			        <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search"></span></button>
			      </span>
			    </div>
			  </div>
		</div>
	</div>

	<div class="container-fluid padtop10">
			<div class="row">
			    <div class="col-md-12">
					<table id="usersList" class="table table-striped table-bordered table-hover ">
					<thead>
						<tr>
						 	<td width="50"><input type="checkbox"></td>
						 	<td width="50">序号</td>
						 	<td width="100">姓名</td>	
						 	<td width="200">用户名</td>
						 	<td width="50">年龄</td>
						 	<td width="50">性别</td>
						 	<td>爱好</td>
					 </tr>
					</thead>
					<tbody>
						
					</tbody>
					 
					 <!-- <tr>
					 	<td><input type="checkbox"></td>
					 	<td>1</td>
					 	<td>刘能</td>
					 	<td>22</td>
					 	<td>男</td>
					 	<td>昌平区</td>
					 	<td>121312312313</td>
					 	<td>吃饭</td>
					 </tr>
					 <tr>
					 	<td><input type="checkbox"></td>
					 	<td>2</td>
					 	<td>赵四</td>
					 	<td>22</td>
					 	<td>男</td>
					 	<td>海淀区</td>
					 	<td>121312312313</td>
					 	<td>喝酒</td>
					 </tr>
					 <tr>
					 	<td><input type="checkbox"></td>
					 	<td>3</td>
					 	<td>宋晓峰</td>
					 	<td>22</td>
					 	<td>男</td>
					 	<td>顺义</td>
					 	<td>121312312313</td>
					 	<td>睡觉</td>
					 </tr>
					 <tr>
					 	<td><input type="checkbox"></td>
					 	<td>4</td>
					 	<td>谢广坤</td>
					 	<td>42</td>
					 	<td>男</td>
					 	<td>昌平区</td>
					 	<td>121312312313</td>
					 	<td>吃饭</td>
					 </tr>
					 <tr>
					 	<td><input type="checkbox"></td>
					 	<td>5</td>
					 	<td>王大拿</td>
					 	<td>55</td>
					 	<td>男</td>
					 	<td>东城区</td>
					 	<td>121312312313</td>
					 	<td>看书</td>
					 </tr>
 -->

					</table>
			  </div>
		</div>
	</div>

	<div class="container-fluid padtop10">
		<div class="row">
			 <div class="col-md-3 col-md-offset-9">
				<nav aria-label="Page navigation" class="fr">
				  <ul class="pagination">
				    <li>
				      <a href="#" aria-label="Previous">
				        <span aria-hidden="true">&laquo;</span>
				      </a>
				    </li>
				   
				    <li>
				      <a href="#" aria-label="Next">
				        <span aria-hidden="true">&raquo;</span>
				      </a>
				    </li>
				  </ul>
				</nav>
			</div>
		</div>  
    </div>
   
    <!-- 模态框（Modal） -->
	<div class="modal fade" id="userBox" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	    <div class="modal-dialog">
	        <div class="modal-content">
	            <div class="modal-header">
	                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
	                <h4 class="modal-title" id="myModalLabel">添加用户</h4>
	            </div>

					<div class="modal-body">
						<form class="form-horizontal">
							<div class="form-group">
								<label for="username" class="col-sm-2 control-label">用户名</label>
								<div class="col-sm-8">
									<input type="text" class="form-control" id="username">
								</div>
							</div>
							<div class="form-group">
								<label for="user" class="col-sm-2 control-label">姓名</label>
								<div class="col-sm-8">
									<input type="text" class="form-control" id="user">
								</div>
							</div>
							<div class="form-group">
								<label for="age" class="col-sm-2 control-label">年龄</label>
								<div class="col-sm-2">
									<input type="text" class="form-control" id="age">
								</div>
								<div class="col-sm-4">
									<label class="radio-inline">
										<input type="radio" name="gender" value="男"> 男
									</label>
									<label class="radio-inline">
										<input type="radio" name="gender" value="女"> 女
									</label>
								</div>
							</div>
							<div class="form-group">
								<label for="hobbies" class="col-sm-2 control-label">爱好</label>
								<div class="col-sm-8">
									<label class="checkbox-inline">
										<input type="checkbox" value="option1"> 爬山
									</label>
									<label class="checkbox-inline">
										<input type="checkbox" value="option2"> 唱歌
									</label>
									<label class="checkbox-inline">
										<input type="checkbox" value="option3"> 游泳
									</label>
								</div>
							</div>
						</form>

	            <div class="modal-footer">
	                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
	                <button type="button" class="btn btn-primary" id="saveBtn">保存</button>
	            </div>
	        </div><!-- /.modal-content -->
	    </div><!-- /.modal -->
	</div>

    <!-- <script src="node_modules/_jquery@1.12.4@jquery/dist/jquery.min.js"></script>      -->
    <script src="node_modules/_jquery@1.12.4@jquery/dist/jquery.js"></script>
    <script src="./node_modules/_bootstrap@3.3.7@bootstrap/dist/js/bootstrap.min.js"></script>  
    <script src="js/users.js"></script> 
</body>
</html>